<template>
<div>
    <div id="essay">
        <div id="title">{{ArticleDetailsList.title}}</div>
        <div id="content" v-html="ArticleDetailsList.subs"></div>
    </div>
    <div class="evaluate"><div>浏览量</div> <div @click="CollectArticle()">收藏</div> </div>    
    <div id="Discuss">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button @click="PostComment()">评论</el-button>
    </div>
    <div v-if="NoShowCommentList">这里空空如也</div>
    <div v-else><List></List></div>
</div>
</template>
<script>
import { GainInformation,GetComments,CollectArticle,ArticleDetails,PostComments} from "@/service/Api.js";
import List from "@/components/List.vue";

export default {
    name:"essay",
    components:{
        List
    },
    data(){
        return{
            circleUrl:'',
            input:"",
            ArticleDetailsList:[],
            NoShowCommentList:false,
            CommentList:[],

        }
    },
    methods:{
        CollectArticle(){
            let params ={
                write_id:this.$route.params.id
            }
            CollectArticle(params).then((res)=>{
                console.log(res)
            })

        },
        PostComment(){
            let params = {
                write_id:this.$route.params.id,
                subs : this.input
            }
            PostComments(params).then((res)=>{
                console.log(res)
            })

        }

    },
    created(){
        this.articleid = this.$route.params.id
        ArticleDetails(this.articleid).then((res)=>{
            this.ArticleDetailsList = res.data.data
            console.log(res)
        })
        GetComments(this.$route.params.id).then((res)=>{
            console.log(res)
            this.CommentList = res.data.data
            console.log(this.CommentList)
            if(this.CommentList.length == 0){
                this.NoShowCommentList=true
            }
        })
        GainInformation().then((res)=>{
            console.log(res)
            this.circleUrl = res.data.data.avatar
        })
    }  
}
</script>
<style scoped>
.evaluate{
    display: flex;
    flex-direction: row;
}
.el-avatar {
    float: left;
}
.el-input{
    margin-left: 24px;
    float: left;
    width: 75%;
}
.el-button{
    margin-left: 24px;
    width: auto;
}
#title{

    margin: auto;
    font-weight: 600;
    font-size: 28px;
    word-wrap: break-word;
    color: #222226;
    margin-top:12px;
    margin-bottom: 12px;
}
#content{
    word-wrap: break-word;
    color: #121212;
    font-weight: 400;
    line-height: 1.6;
    font-size:	15px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   
}
#essay{
    width: 90%;
    margin: auto;
}
img{
    max-width: 70%;

}
#Discuss{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    min-height: 50px;
    width: 90%;
    margin: auto;
}

</style>